<template>
  <div class="flex-around list_box" v-if="tabList.length">
          <div class="list_item" @click="changetab(i)"   v-for="(item,i) of tabList" :key="i">
                <div class="flex-center">
                    <a :href="item.link"   style="display:block">
                    <div :style="{'color':itemStyle.activeColor?item.active?itemStyle.activeColor:'':''}">{{item.label}}</div>
                    <div v-show="item.active" :style="{'background':itemStyle.activeColor?item.active?itemStyle.activeColor:'':''}" class="tab_hx"></div>
                    </a>
                </div>
        </div>
  </div>
</template>

<script>
export default {
 props:["tabList",'itemStyle'],
 data() {
    return {
    }
 },
 methods:{
    changetab(i){
        for(var item of this.tabList){
            item.active=false
        }
        this.tabList[i].active=true
    },

 },
}
</script>

<style scoped lang="scss">
 .list_box{
    line-height: 40rem;
    .list_item{
        width: 120rem;
        // font-weight: 550;
        text-align: center;
        cursor: pointer;
        div{
            height: 100%;
            align-items: center;
            display: flex;
            justify-content: center;
        }
        a{
            height: 100%;
        }
    }
 }
.active_tab{
color: #0061FF!important;
}
.tab_hx{
    width: 103rem;
    height: 5rem!important;
    border-radius: 8rem;
    margin: auto;
}
</style>